<template>
  <div class="mainAppXq">
    <iframe :src="appUrl" frameborder="0" id="portalIframe"></iframe>
  </div>
</template>
<script>
import Config from "../../config";
import { mapState } from "vuex";

export default {
  name: "AppView",
  data() {
    return {
      cssUrl: Config.appBuildConfig.custumCss
    };
  },
  computed: {
    ...mapState("appBuilder", ["appUrl"])
  },
  methods: {
    resize() {
      this.$("#portalIframe").height(window.innerHeight - 96);
    },
    changePortalStyle() {
      this.$(() => {
        this.$("iframe").on("load", () => {
          this.$("iframe")
            .contents()
            .find("head")
            .append(
              this.$(
                '<link rel="stylesheet" type="text/css" href=' +
                  this.cssUrl +
                  ">"
              )
            );
        });
      });
    },
    redirect() {
      if (!this.appUrl) {
        this.$router.replace("/yygj");
      }
    }
  },
  mounted() {
    this.resize();
    this.changePortalStyle();
    this.redirect();
  }
};
</script>
<style scoped>
#portalIframe {
  width: 100%;
}
.mainAppXq {
  height: 100%;
  width: 100%;
}
</style>
